<template>
    <div>
        <top></top>
        <v-container>
            <v-row>
                <!-- 第一个图片 -->
                <v-col cols="6" class="pa-2" >
                    <router-link to="/loan/content">
                        <v-img src="/asset/loan/img/xbt01.jpg"></v-img>
                    </router-link>
                </v-col>
                <!-- 第二个图片 -->
                <v-col cols="6" class="pa-2">
                    <router-link to="/user/chat">
                        <v-img src="/asset/loan/img/xbt02.jpg"></v-img>
                    </router-link>
                </v-col>
            </v-row>
        </v-container>

        <v-container>
            <h3 class="my-2 pl-2 border-left-red">请根据您的情况看方案</h3>
            <v-row class="py-6 px-2 grid-btn mt-0" style="padding-bottom: 0 !important">
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan/channels?cate=mortgage-tax`"
                    >
                        <div class="text-center">
                            <div>企业族贷款</div>
                        </div>
                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao01.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan/channels?cate=mortgage-car`"
                    >
                        <div class="text-center">
                            <div>有车族贷款</div>
                        </div>

                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao02.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan/channels?cate=credit-provident`"
                    >
                        <div class="text-center">
                            <div>上班族贷款</div>
                        </div>
                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao03.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan/channels?cate=mortgage-house`"
                    >
                        <div class="text-center">
                            <div>有房族贷款</div>
                        </div>
                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao04.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn  link
                            block
                            plain
                            :ripple="false"
                            :to="`/loan/channels?cate=general`"
                            >
                        <div class="text-center">
                            <div>保单族贷款</div>
                        </div>
                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao05.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
                <v-col cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                    <v-btn
                        link
                        block
                        plain
                        :ripple="false"
                        :to="`/loan/channels?cate=general`"
                    >
                        <div class="text-center">
                            <div>其他贷款</div>
                        </div>
                        <div style="height: 56px; width: 56px">
                            <v-img src="/asset/loan/img/xiaotubao06.png"></v-img>
                        </div>
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>


        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">附近的门店</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">
                        <router-link to="/loan/stores">
                            查看全部门店
                        </router-link>
                    </v-col>
                </v-row>
                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <h3 class="primary--text">
                            <v-row>
                                <v-col cols="6">客多多-成都攀成钢店</v-col>
                                <v-col cols="6" class="text-right">100km</v-col>
                            </v-row>
                        </h3>
                        <v-row>
                            <v-col cols="12" style="padding: 10px">
                                <div style="font-size: 12px;color: #6f7071">地址：锦江区通源街616号1F（泸州银行旁）</div>
                            </v-col>
                        </v-row>
                        <v-btn
                            style="margin-top: 10px;margin-right: 10px"
                            depressed
                            dark
                            small
                            class="rounded-pill"
                            color="primary"
                            :to="`/login`"
                        >
                            电话：18328494698
                        </v-btn>
                        <v-btn
                            style="margin-top: 10px"
                            depressed
                            dark
                            small
                            class="rounded-pill"
                            color="primary"
                            :to="`/login`"
                        >
                            电子地图
                        </v-btn>
                    </v-card-text>
                </v-card>
                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <h3 class="primary--text">
                            <v-row>
                                <v-col cols="6">
                                    成都贷款咨询-沙井店
                                </v-col>
                                <v-col cols="6" class="text-right">10km</v-col>
                            </v-row>
                        </h3>
                        <v-row>
                            <v-col cols="12" style="padding: 10px">
                                <div style="font-size: 12px;color: #6f7071">地址：锦江区沙井西环路2101-10号</div>
                            </v-col>
                        </v-row>
                        <v-btn
                            style="margin-top: 10px;margin-right: 10px"
                            depressed
                            dark
                            small
                            class="rounded-pill"
                            color="primary"
                            :to="`/login`"
                        >
                            电话：18813933381
                        </v-btn>
                        <v-btn
                            style="margin-top: 10px"
                            depressed
                            dark
                            small
                            class="rounded-pill"
                            color="primary"
                            :to="`/login`"
                        >
                            电子地图
                        </v-btn>
                    </v-card-text>
                </v-card>
            </div>
        </v-container>



        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">咨询服务专员</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">
                        <router-link to="/loan/commissioners">
                            查看全部专员
                        </router-link>
                    </v-col>
                </v-row>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="100" >
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/yuangong1 (1).jpg" alt="员工图片">
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="12">
                                        <div>成都贷款咨询专家-陈经理</div>
                                        <v-btn
                                            style="margin-top: 10px;margin-right: 10px"
                                            depressed
                                            dark
                                            small
                                            class="rounded-pill"
                                            color="primary"
                                        >
                                            电话咨询
                                        </v-btn>
                                        <v-btn
                                            style="margin-top: 10px"
                                            depressed
                                            dark
                                            color="secondary"
                                            small
                                            class="rounded-pill"
                                            :to="`/login`"
                                        >
                                            在线咨询
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="100" >
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/c5a12cb0c13abf6a.jpg" alt="员工图片">
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="12">
                                        <div>成都咨询服务专员-孙经理</div>
                                        <v-btn
                                            style="margin-top: 10px;margin-right: 10px"
                                            depressed
                                            dark
                                            small
                                            class="rounded-pill"
                                            color="primary"
                                        >
                                            电话咨询
                                        </v-btn>
                                        <v-btn
                                            style="margin-top: 10px"
                                            depressed
                                            dark
                                            color="secondary"
                                            small
                                            class="rounded-pill"
                                            :to="`/login`"
                                        >
                                            在线咨询
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>

            </div>

        </v-container>


        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">成功案例</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">
                        <router-link to="/loan/case">
                            查看全部案例
                        </router-link>
                    </v-col>
                </v-row>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="80"  class="square-avatar">
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/4fe92c377c6daf0e.png" >
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="8">
                                        <h3>曾老板贷款案例</h3>
                                        <div class="truncate-text">
                                            王先生是我市的一位企业员工，今年30岁，本科学历，每月工资8000元，有社保，但是30岁的王先生
                                        </div>
                                    </v-col>
                                    <!-- 第三列：两个按钮 -->
                                    <v-col cols="4" class="d-flex justify-center align-center">
                                        <div @click="goToNewsDetail()">查看详情</div>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <v-row align="center">
                            <v-col cols="auto">
                                <v-avatar size="80"  class="square-avatar">
                                    <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/4fe92c377c6daf0e.png" >
                                </v-avatar>
                            </v-col>
                            <v-col>
                                <v-row>
                                    <v-col cols="8">
                                        <h3>陈老板贷款案例</h3>
                                        <div class="truncate-text">
                                            宋先生，28岁，在我市开一个小公司，公司只有一个个体户执照，公司没有流水，个人有信用卡，但是过去
                                        </div>
                                    </v-col>
                                    <!-- 第三列：两个按钮 -->
                                    <v-col cols="4" class="d-flex justify-center align-center">
                                        <div @click="goToNewsDetail()">查看详情</div>
                                    </v-col>
                                </v-row>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
            </div>
        </v-container>



        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">常见问题</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">
                        <router-link to="/loan/qa/words" style="text-decoration: none;">
                              <span style="background: #20ef09;color: white;padding: 5px 10px;border-radius: 10px;margin-right: 15px">
                            我要提问
                        </span>
                        </router-link>
                        <span>
                            <router-link to="/loan/qa">
                                查看全部
                            </router-link>
                        </span>
                    </v-col>
                </v-row>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <div class="item">
                            <div class="wen">
                                <h3>
                                    <v-icon>mdi-information</v-icon>
                                    贷款如何利息最低？
                                </h3>
                            </div>
                            <div class="da">
                                <span style="white-space:normal !important;">
                                        答：银行的贷款利息最低，一般1万元1个月30-75元之间，所以贷款首先尝试银行。但你在这个世界上，能告诉你怎么贷利息最低的只有中介。
                                </span>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <div class="item">
                            <div class="wen">
                                <h3>
                                    <v-icon>mdi-information</v-icon>
                                    银行贷不了怎么办？
                                </h3>
                            </div>
                            <div class="da">
                                <span style="white-space:normal !important;">
                                        答：找正规贷款公司，如果不知道，就可以委托中介。
                                </span>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>

            </div>
        </v-container>



        <v-container>
            <div>
                <v-row>
                    <v-col cols="6">
                        <h3 class="my-2 pl-2 border-left-red">成都贷款咨询资讯</h3>
                    </v-col>
                    <v-col cols="6" class="text-right" style="font-size: 12px;color: #6f7071;margin-top: 8px">
                        <router-link to="/loan/news">
                            查看全部资讯
                        </router-link>
                    </v-col>
                </v-row>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <div class="item">
                            <div class="wen">
                                <h3>
                                    2025成都好工作
                                </h3>
                            </div>
                            <div class="da">
                                <span class=".text-truncate">
                                     贷款网是中国目前最大的企业融资顾问公司，为有融资贷款需求的客户提供专业的贷款咨询及协办服务，助力他们
                                </span>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>

                <v-card outlined class="rounded-lg" st>
                    <v-card-text>
                        <div class="item">
                            <div class="wen">
                                <h3>
                                    成都市双流区组织召开2024年6月金融机构座谈会
                                </h3>
                            </div>
                            <div class="da">
                                <span class=".text-truncate">
                                    2024-06-04 10:54:47 双流区财政局6月3日上午，双流区组织开展2024年6月金融机
                                </span>
                            </div>
                        </div>
                    </v-card-text>
                </v-card>

            </div>
        </v-container>

    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";

import Top from "../common/top.vue";


export default {
    data: () => ({
        dialog: false,
        banner: [],
        home_h5_diy:[],
        qr_code: "",
        app_name: '',
    }),
    components: {
        Top,
    },

    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.load();
        this.saveCode();
    },
    methods: {
        goToNewsDetail(id) {
            this.$router.push({ name: 'LoanCaseInfo', params: { id } });
        },
        callPhone() {
            // 实际的拨打电话功能需要根据实际情况实现，这里只是个示例
            alert('拨打电话给店铺');
        },
        saveCode(){
            if (this.$route.query.code) {
                console.log('邀请码：',this.$route.query.code)
                // 将邀请码存储到localStorage
                localStorage.setItem('inviteCode', this.$route.query.code);
            }
        },
        load() {
            axios
                .get(`/v1/home`)
                .then((response) => {
                    this.banner = response.data.data.banner;
                    this.home_h5_diy = response.data.data.home_h5_diy;
                    console.log('this.home_h5_diy',this.home_h5_diy)
                    this.appName = response.data.data.app_name;
                })
                .catch(function () {})
                .then(function () {});
        },

        goPlan() {
            if (this.uid && this.uid > 0) {
                this.$router.push({ path: `/loan` });
            } else {
                this.$toasted.show("请联系客服进行开通", {
                    type: "error",
                    position: "bottom-center",
                });
            }
        },
    },
};
</script>

<style lang="scss">

.v-card{
    margin-bottom: 10px;
}


.text-truncate {
    white-space: nowrap; /* 保持文本在一行显示 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 100%; /* 限制最大宽度，确保不会超出容器 */
}

.truncate-text {
    width: 150px; /* 设置div的宽度，确保能够容纳10个字符 */
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 在文本末尾添加省略号 */
}
.square-avatar {
    border-radius: 0 !important; /* 移除圆角 */
}
.border-left-red {
    border-left: 3px solid #ba2b39;
}

.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}


.theme--light.half-transparent.v-text-field--solo
> .v-input__control
> .v-input__slot {
    background-color: rgb(255 255 255 / 71%);
}
</style>
